<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>计划列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style type="text/css">
			.mui-bar-nav a {
				color: white !important;
			}
			
			.mui-plus header.mui-bar {
				display: none!important;
			}
			
			.mui-plus .mui-bar-nav~.mui-content {
				padding: 0!important;
			}
			
			.mui-plus .plus {
				display: inline;
			}
			
			.plus {
				display: none;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
			p {
				text-indent: 22px;
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			
			.mui-popover {
				height: 300px;
			}
			
			.mui-content {
				padding: 10px;
			}
			
			.mui-popover {
				height: 138px;
				width: 105px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left" href="plan_add.html">
				新增
			</a>
			<h1 class="mui-title">备忘录</h1>
			<a class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right" href="#topPopover">
				查看
			</a>
		</header>
		<div class="mui-content">
			<div id="contnt">
				<!--<div class="mui-card">
					<div class="mui-card-header">
						<span>2012-11-11</span>
						<span>已完成</span>
					</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							这是一条备忘录
						</div>
					</div>
					<div class="mui-card-footer">
						<button class="mui-btn mui-btn-primary">编辑</button>
						<button class="mui-btn mui-btn-danger">删除</button>
					</div>
				</div>-->
			</div>

			<!--右上角弹出菜单-->
			<div id="topPopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a href="javascript:;" id="all">查看全部</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="javascript:;" id="over">已完成</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="javascript:;" id="unover">未完成</a>
							</li>
							
						</ul>
					</div>
				</div>

			</div>

		</div>
		<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
				(function($, doc) {
					getInfo(0);
					// 点击查看全部
					document.getElementById("all").addEventListener("click",function () {
						$('#topPopover').popover('hide');
						getInfo(0);
					});
					// 点击查看已完成
					document.getElementById("over").addEventListener("click",function () {
						$('#topPopover').popover('hide');
						getInfo(1);
					});
					// 点击查看未完成
					document.getElementById("unover").addEventListener("click",function () {
						$('#topPopover').popover('hide');
						getInfo(2);
					});
				}(mui, document));

			function getInfo(state) {
				switch(state) {
					case 0:
						var squerySql = 'select * from t_notic'
						break;
					case 1:
						var squerySql = 'select * from t_notic where state = "0"'
						break;
					case 2:
						var squerySql = 'select * from t_notic where state = "1"'
						break;
					default:
						var squerySql = 'select * from t_notic'
						break;
				}
				db.transaction(function(tx) {
					var creatSql = 'CREATE TABLE IF NOT EXISTS t_notic (content ,creattime ,updatatime ,state)';
					tx.executeSql(creatSql);
					tx.executeSql(squerySql, [], function(ts, data) {
						//console.log(data);
						if(data) {
							var content = "";
							for(var i = 0; i < data.rows.length; i++) {
								var item = data.rows.item(i);
								//console.log(item);
								switch(item.state) {
									case "0":
										var state = "已完成"
										break;
									case "0":
										var state = "未完成"
										break;
									case "0":
										var state = "已删除"
										break;
									default:
										var state = ""
										break;
								}
								content += '<div class="mui-card">' +
									'<div class="mui-card-header">' +
									'<span>' + item.updatatime + '</span>' +
									'<span>' + state + '</span>' +
									'</div>' +
									'<div class="mui-card-content">' +
									'<div class="mui-card-content-inner">' +
									item.content +
									'</div>' +
									'</div>' +
									'<div class="mui-card-footer">' ;
									
									if(item.state == "0"){
										content += '<button class="mui-btn mui-btn-primary">编辑</button>' +
									'<button class="mui-btn mui-btn-danger">删除</button>'
									}else if(item.state == "1"){
										content += '<button class="mui-btn mui-btn-primary">编辑</button>' +
										'<button class="mui-btn mui-btn-primary">完成</button>' +
										'<button class="mui-btn mui-btn-danger">删除</button>'
									}
									content +='</div>' +
									'</div>';
									
							}
							document.getElementById("contnt").innerHTML = content;
						}
					}, function(ts, message) {
						alert(message);
					})
				})
			}
		</script>
	</body>

</html>